<template>
  <div class="otherlogin-container">
    <div class="phone-container-main">
      <div class="phone-left">
        <img src="../../assets/phonelogin.png" alt="手机"><br>
        <a href="javascript:;" class="phone-login-btn" @click="phoneLogin">手机号登录</a><br>
        <a @click="goRegister" href="javascript:;" class="phone-register">注册</a>
      </div>
      <div class="phone-right">
        <a href="javascript:;" @click="pwdLogin">密码登录</a>
        <a href="javascript:;" @click="visitorLogin">游客登陆</a>
      </div>
    </div>
    <div class="argee-txt">
      <div class="txt-main">
        <input type="checkbox" v-model="agreeIpt">
        <a href="https://st.music.163.com/official-terms/service" target="_blank">同意<b>《服务条款》《隐私政策》《儿童隐私政策》</b></a>
      </div>
      <div class="go-qr-login" @click="goQrLogin">
        <img src="../../assets/sanjiao.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'otherlogin',
  data() {
    return {
      agreeIpt: false // 存储 是否 勾选 状态
    }
  },
  methods: {
    // 去 扫码登录面板
    goQrLogin() {
      this.$store.commit('goQrLogin')
    },
    // 手机登录
    phoneLogin() {
      // 判断是否勾选 同意条款
      if (this.agreeIpt) {
        this.$store.commit('goPhoneLogin')
      } else {
        this.$store.commit('OpenTitle', '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》')
        this.$store.dispatch('closeTitle')
      }
    },
    // 游客登陆
    visitorLogin() {
      if (this.agreeIpt) {
        console.log('可以进行游客登录')
      } else {
        this.$store.commit('OpenTitle', '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》')
        this.$store.dispatch('closeTitle')
      }
    },
    // 密码登录
    pwdLogin() {
      if (this.agreeIpt) {
        this.$store.commit('goPwdLogin')
      } else {
        this.$store.commit('OpenTitle', '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》')
        this.$store.dispatch('closeTitle')
      }
    },
    goRegister() {
      if (this.agreeIpt) {
        this.$store.commit('goRegisterLogin')
      } else {
        this.$store.commit('OpenTitle', '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》')
        this.$store.dispatch('closeTitle')
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/base.less';
.phone-container-main {
  margin-top: 30px;
  display: flex;
  height: 230px;
  box-sizing: border-box;
  .phone-left {
    text-align: center;
    width: 65%;
    border-right: 1px solid #ccc;
    a {
      display: inline-block;
      text-decoration: none;
      border-radius: 5px;
      font-size: 13px;
    }
    .phone-login-btn {
      color: #fff;
      background-color: #3b8ad4;
      margin-top: 40px;
      margin-bottom: 18px;
      padding: 9px 73px;
      border: 1px solid #cdcccc;
      &:hover {
        background-color: #569de0;
      }
    }
    .phone-register {
      background-color: #f3f3f3;
      border: 1px solid #cccaca;
      color: #000;
      padding: 8px 90px;
      &:hover {
        background-color: #fff;
      }
    }
  }
  .phone-right {
    width: 35%;
    text-align: center;
    padding-top: 30px;
    a {
      color: #000;
      border: 1px solid #ccc;
      text-decoration: none;
      font-size: 12px;
      display: inline-block;
      padding: 7px 50px;
      border-radius: 5px;
      background-color: #f3f3f3;
      margin-top: 20px;
      &:hover {
        background-color: #fff;
      }
    }
  }
}
.argee-txt {
  font-size: 12px;
  align-items: center;
  margin-top: 10px;
  padding-left: 30px;
  height: 43px;
  display: flex;
  justify-content: space-between;
  .txt-main {
    height: 100%;
    display: flex;
    align-items: center;
    input[type='checkbox'] {
      cursor: pointer;
    }
    a {
      text-decoration: none;
      color: #999999;
      b {
        color: #507daf;
      }
    }
  }
  .go-qr-login {
    float: right;
    height: 33px;
    cursor: pointer;
    img {
      height: 120%;
    }
  }
}
</style>